<template>
  <view>
    <view class="xmain">
      <headBar title="收藏题目"></headBar>
      <view class="qtCOntent">
        <view class="qtTitle">
          <view class="uni-flex uni-row">
            <view class="flex-item">
              <view class="selTag" v-if="currentQuestion.answer <= 4">单选</view>
              <view class="selTag" v-else="currentQuestion.answer<4">多选</view>
            </view>
            <view class="flex-item">
              {{ currentQuestion.title }}
            </view>
          </view>
        </view>
        <image :src="currentQuestion.img_url" v-if="currentQuestion.img_url"></image>
        <view class="uni-flex uni-column qtOptions">
          <view class="flex-item flex-item-V  qtOptionsItem" v-for="(item,index) in optionList">
            <view class="uni-flex uni-row" v-if="item.optionTitle" >
              <view class="flex-item xleft">
                <view class="abc" v-if="item.isRightAnswer" style="background: #0e7b11;color:#FFFFFF;">√
                </view>
                <view class="abc" v-else>{{ item.key }}</view>
              </view>
              <view class="flex-item">
                {{ item.optionTitle }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 40rpx;"></view>
      <view class="qtPreNext uni-flex uni-row">
        <view class="flex-item" @click="x_redirect('/pages/wrong/lst')">
          <view class="uni-flex uni-row">
            <uni-icons type="clear" size="28" color="#ff0000"></uni-icons>
            <view class="flex-item">{{ Object.keys(wrongList).length }}</view>
          </view>
        </view>
        <view style="width:30rpx;"></view>
        <view class="flex-item" @click="x_redirect('/pages/collect/lst')">
          <view class="uni-flex uni-row">
            <uni-icons type="star-filled" size="28" color="#db6209"></uni-icons>
            <view class="flex-item">{{ collectNum }}</view>
          </view>
        </view>
      </view>
      <view style="height: 30rpx;"></view>
      <view class="qtPreNext uni-flex uni-row">
        <view class="flex-item">
          <uni-fav @click="dumpPrev()" class="favBtn" :star="false" bg-color="#3495fc" fg-color="#ffffff"
                   :contentText="{contentDefault: '上一题',contentFav: '上一题'}" :circle="true"/>
        </view>
        <view style="width:10rpx;"></view>
        <view class="flex-item">
          <uni-fav @click="dumpNext()" class="favBtn" :star="false" bg-color="#3495fc" fg-color="#ffffff"
                   :contentText="{contentDefault: '下一题',contentFav: '下一题'}" :circle="true"/>
        </view>
        <view style="width:10rpx;"></view>
        <view class="flex-item">
          <uni-fav @click="alertShow = true" class="favBtn" :star="false" bg-color="#3495fc" fg-color="#ffffff"
                   :contentText="{contentDefault: '查看解析',contentFav: '查看解析'}" :circle="true"/>
        </view>
        <view style="width:10rpx;"></view>
        <view class="flex-item">
          <uni-fav @click="doCollect(false)" class="favBtn" :bg-color="collectColor" fg-color="#ffffff"
                   bg-color-checked="#007aff"  :contentText="{contentDefault: collectText,contentFav: '已收藏'}" :circle="true"/>
        </view>
      </view>
      <xToastCommon v-if="alertShow" :isShow="alertShow"  @hideDialog="handleChangeDialogShow">
        <view class="" style="background: #FFFFFF;border-radius: 10rpx;width:95%;margin: 0rpx auto;padding:10rpx;">
          <uni-section title="题解分析" type="line">
            <view>
              {{ currentQuestion.explains }}
            </view>
          </uni-section>
          <uni-section title="正确答案" type="line">
            <view>
              {{ currentQuestion.answerArr.join() }}
            </view>
          </uni-section>
        </view>
      </xToastCommon>
    </view>
    <bootNav nav="home"></bootNav>
  </view>

</template>

<script>
export default {
  data() {
    return {
      id:0,
      currentIndex: 0,
      indexMapList:[], // 指针映射
      listKey:'qtCollected',
      currentQuestion: {},
      optionList: {},
      alertShow: false,
      rightNum: 0,
      wrongList: {},
      collectNum: 0,
      isCollect: false,
      collectText:'收藏',
      collectColor:'#dd524d',
      questionList:{}
    }
  },
  onShareAppMessage() {
    return {
      title: this.title,
    }
  },
  onShareTimeline: function () {
    return {
      title: this.title,
    }
  },
  onLoad(e) {
    var t = this;
    var id = e.id;
    t.id = id;
    t.getQuestionList();
    // 获取当前题目
    t.getQuestion(id);
    //初始化错误列表
    t.doWrongList(false);
    // 初始化正确数量
    t.doRightNum(false);
    // 获取收藏数
    t.doCollect(true);
  },
  methods: {
    // 初始化题目选项
    initOptionList() {
      var initOptionList = {
        "A": {"key": "A", "optionColumn": "option1", "isRightAnswer": false, "optionTitle": ""},
        "B": {"key": "B", "optionColumn": "option2", "isRightAnswer": false, "optionTitle": ""},
        "C": {"key": "C", "optionColumn": "option3", "isRightAnswer": false, "optionTitle": ""},
        "D": {"key": "D", "optionColumn": "option4", "isRightAnswer": false, "optionTitle": ""}
      };
      var t = this;
      var currentQuestion = t.currentQuestion;
      t.optionList = initOptionList;
      var optionList = t.optionList;
      for (var x in optionList) {
        optionList[x]["optionTitle"] = currentQuestion[optionList[x]['optionColumn']]
        if ((currentQuestion.answerArr) && (currentQuestion.answerArr).includes(x)) {
          optionList[x]["isRightAnswer"] = true;
        }
      }
      t.optionList = optionList;
    },
    currentIndexChange() {
      var t = this;
      var indexMapList = t.indexMapList;
      var questionId = indexMapList[t.currentIndex];
      t.getQuestion(questionId);
      t.x_redirect('/pages/collect/collect?id='+questionId);
    },
    getQuestion(id) {
      var t = this;
      if(!id){
        uni.showToast({title: '数据错误', icon: 'error', duration: 2000})
      }
      var questionList = t.questionList;
      var currentQuestion = questionList[id];
      if(!currentQuestion){
        uni.showToast({title: '数据错误', icon: 'error', duration: 2000})
      }else{
        t.currentQuestion = currentQuestion;
        t.initOptionList();
      }
    },
    getQuestionList() {
      var t = this;
      var questionList = t.xCacheGet(t.listKey);
      if(questionList){
        t.questionList = questionList;
        var indexMapList = {};
        var i = 0;
        for(var x in questionList){
          var qid = questionList[x]['question_id'];
          indexMapList[i] = questionList[x]['question_id'];
          if(qid == t.id) t.currentIndex = i;
          i++;
        }
        t.indexMapList = indexMapList;
      }

    },
    selectAnswer(index) {
      var t = this;
      var optionList = t.optionList;
      var isLock = false;
      for (var x in optionList) {
        if (optionList[x]['key'] === 'X') {
          isLock = true;
          break;
        }
      }
      if (!isLock) {
        var selectOption = optionList[index];
        if (selectOption.isRightAnswer) {
          optionList[index]['key'] = '√';
          t.doRight();
        } else {
          optionList[index]['key'] = 'X';
          t.doWrong();
        }
        //记录操作答案
        t.currentQuestion.optionListActed = optionList;
        var questionList = t.xCacheGet(t.qtPageKey);
        questionList[t.currentIndex.index] = t.currentQuestion;
        t.xCacheSet(t.qtPageKey, questionList);
      }
    },
    doRight() {
      var t = this;
      var currentQuestion = t.currentQuestion;
      var isDump = 0;//是否要跳转到下一题
      if (currentQuestion.answer <= 4) {
        // 单选，直接跳到下一题
        isDump = 1;
      } else {
        // 多选题继续选择
        var rightNum = 0;
        var optionList = t.optionList;
        for (var x in optionList) {
          if (optionList[x]['key'] === '√') {
            rightNum++;
          }
        }
        if (rightNum === currentQuestion['answerArr'].length) {
          isDump = 1;
        }
      }
      if (isDump === 1) {
        t.doRightNum(true);
        t.dumpNext();
      }
    },
    doWrong() {
      var t = this;
      // 回答错误，展示提示
      t.alertShow = true;
      t.doWrongList(true);
    },
    dumpNext() {
      // 跳转下一题
      var t = this;
      var questionList = t.questionList;
      if (t.currentIndex < (Object.keys(questionList).length - 1)) {
        t.currentIndex++;
        t.currentIndexChange();
        t.alertShow = false;
      } else {
        uni.showToast({title: '已经是最后一题了', icon: 'error', duration: 2000})
      }

    },
    dumpPrev() {
      // 跳转上一题
      var t = this;
      if (t.currentIndex > 0) {
        t.currentIndex--;
      } else {
        if (t.currentIndex <= 0) {
          uni.showToast({title: '已经是第1题了', icon: 'error', duration: 2000})
        } else {
          t.currentIndex--;
        }
      }
      t.currentIndexChange();
      t.alertShow = false;
    },
    doWrongList(add) {
      var t = this;
      var cacheWrongListKey = t.listKey;
      var cacheWrongList = t.xCacheGet(cacheWrongListKey);
      var id = t.currentQuestion.question_id;
      if (!cacheWrongList) {
        cacheWrongList = {};
      }
      if (add) {
        cacheWrongList[id] = t.currentQuestion;
        t.xCacheSet(cacheWrongListKey, cacheWrongList);
      }
      t.wrongList = cacheWrongList;

    },
    doRightNum(add) {
      var t = this;
      var cacheKey = t.cacheKey;
      var cacheRightNumKey = cacheKey + "_rightNum"
      var cacheRightNum = t.xCacheGet(cacheRightNumKey);
      if (!cacheRightNum) {
        cacheRightNum = 0;
      }
      if (add) {
        cacheRightNum++;
        t.xCacheSet(cacheRightNumKey, cacheRightNum);
      }
      t.rightNum = cacheRightNum;
    },
    doCollect(getNum) {
      var t = this;
      var cacheKey = "qtCollected";
      var currentQuestion = t.currentQuestion;
      var id = currentQuestion.question_id;
      var cacheCollectList = t.xCacheGet(cacheKey);
      if (!cacheCollectList) {
        cacheCollectList = {};
      }
      if (!getNum) {
        if (cacheCollectList[id]) {
          delete cacheCollectList[id];
        } else {
          cacheCollectList[id] = currentQuestion;
        }
        t.xCacheSet(cacheKey, cacheCollectList);
      }
      if (!cacheCollectList[id]) {
        t.isCollect = false;
        t.collectText = '收藏';
        t.collectColor = '#666666';
      } else {
        t.isCollect = true;
        t.collectText = '已收藏';
        t.collectColor = '#dd524d';
      }
      var collectNum = Object.keys(cacheCollectList).length;
      t.collectNum = collectNum;
    },
    handleChangeDialogShow(){
      var t = this;
      t.alertShow = !t.alertShow;
    }
  }
}
</script>

<style>
@import "../question/question.css";

</style>
